<!-- 服务台总览 -->
<template>
	<Card>
		<template #head>
			服务台总览
		</template>
		<template #body>
			<u-row>
				<u-col v-for="(item,index) in Config" :span="index == 0 ? 12 : 6">
					<IconGrid :data="item"></IconGrid>
				</u-col>
			</u-row>

		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardDetail.vue'
	import IconGrid from '@/pagesDesk/components/iconGrid.vue'
	import Colors from '@/common/color.js'
	import IconFontName from '@/common/customIconFontName.js'
	export default {
		components: {
			Card,
			IconGrid,
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return null
				}
			}
		},
		data() {
			return {

			}
		},

		computed: {
			Config() {
				return [{
					iconName: IconFontName.DangRiZuoXi.iconName,
					num: this.data?.workUser || '',
					label: '当日坐席',
					color: Colors.black,
				}, {
					iconName: IconFontName.YiJieDianHua.iconName,
					num: this.data?.answer || '0',
					label: '已接电话(个)',
					color: Colors.green,
				}, {
					iconName: IconFontName.WeiJieDianHua.iconName,
					num: this.data?.notAnswer || '0',
					label: '未接电话(个)',
					color: Colors.red,
				}, {
					iconName: IconFontName.YiJianGongDan.iconName,
					num: this.data?.createOrder || '0',
					label: '已建工单(个)',
					color: Colors.blue,
				}, {
					iconName: IconFontName.WeiJianGongDan.iconName,
					num: this.data?.noCreateOrder || '0',
					label: '未建工单(个)',
					color: Colors.yellow,
				}, {
					iconName: IconFontName.DianHuaZhaoRen.iconName,
					num: this.data?.phoneLook || '0',
					label: '电话找人(个)',
					color: Colors.cyan,
				}, {
					iconName: IconFontName.FuWuTaiJieJue.iconName,
					num: this.data?.workMake || '0',
					label: '服务台解决(个)',
					color: Colors.purple,
				}, {
					iconName: IconFontName.WuXiaoDianHua.iconName,
					num: this.data?.phoneInvalid || '0',
					label: '无效电话(个)',
					color: Colors.gray,
				}, ]
			}
		}
	}
</script>

<style>
</style>
